@config.main("Search By Gene ID") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Search By Gene ID")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> Gene ID  :</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" type="text" rows="5" name="geneId"></textarea>
                            <span class="help-block">
                                e.g.,&nbsp;<a href="#" onclick="getEg()"><em class="egCrics">example</em></a></span>
                        </div>
                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-2"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Run()">
                            Search</button>

                    </div>
                </form>

                <div id="result" class="result">
                    <hr/>

                    <h5>Result:</h5>

                    @components.table()
                </div>
            </div>
        </div>
    </div>

    <script>

            $(function () {

                let json = [
                    {"field": "func", "title": "Function"},
                    {"field": "snp", "title": "GWAS SNP"},
                    {"field": "qtl", "title": "QTL"}
                ]

                let checkbox = ""
                $.each(json, (i, v) => {

                    checkbox += `<div class="form-check"><label class="form-check-label">
                            <input type='checkbox' checked='checked' value="${v.field}"  onclick="setColumns('${v.field}')" id="${v.field}"> ${v.title}
                           <i class="input-helper"></i> </label></div>`
                })

                $("#table-check").html(checkbox)

                $("#table").bootstrapTable()

                $.each(json,(i,v)=>{
                    $("#" + v.field).click()
                })
            })

            function getEg() {
                const eg = "CmoCh07G009000,CmoCh07G008070,CmoCh07G008290,CmoCh02G008870,CmoCh02G011870,CmoCh02G014240," +
                        "CmoCh02G015900,CmoCh02G015980,CmoCh04G021530,CmoCh04G022400," +
                        "CsGy1G000080,CsGy1G000660,CsGy1G003080,CsGy1G010450,CsGy1G025570,CsGy2G000240,CsGy2G001330," +
                        "CsGy2G009090,CsGy2G013280,CsGy2G015500"
                $(`textarea[name=geneId]`).val(eg)
            }

            function Run() {
                const index = MyTable.prototype.runningIcon()
                $.ajax({
                    url: "@routes.SearchController.searchByGeneId()",
                    type: "post",
                    data: $("#form").serialize(),
                    success: function (data) {
                        layer.close(index)
                        $("#table").bootstrapTable("load", data)
                        $("#result").show()
                    }
                })

            }


            function GetGeneId(value, row) {
                return `<a href="/capdb/browse/geneInfoPage?id=${row.id}" target="_blank">${value}</a>`
            }

    </script>

}